<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="headtop">
          <div class="headtopdiv">
            <!-- <timePicker /> -->
            <!-- {{ doctitle }} -->
            <!-- <div class="time-btn">
              <div
                class="time-btn-item"
                :class="activeTime === index ? 'active' : ''"
                v-for="(item, index) in timeList"
                :key="index"
                @click="changeTime(index)"
              >
                <span>{{ item.name }}</span>
              </div>
            </div> -->
          </div>
          <div class="headbotul">
            <ul>
              <li
                v-for="(item, index) in bannerlist"
                :key="index"
                :class="getCheckedBj(index)"
                @click="bannertab(index, item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div
            class="flowControl"
            v-if="name.name == '行政许可' || name.name == '打假打私'"
            @click="flowControlFn(name.name)"
          >
           <img
                  style="width: 10px; height: 10px; margin-right: 5px"
                  src="../assets/common-new/nation-icon.png"
                  alt=""
                />
            流程管控
          </div>
        </div>
        <!-- contentmid区分各个模块  0 全景 1许可 2市管 3电子烟...-->
        <div class="contentmid">
          <Qjzl v-if="contentmid == 0" />
          <certificate v-if="contentmid == 1"></certificate>
          <crackDown v-if="contentmid == 2"></crackDown>
          <regulation v-if="contentmid == 3"></regulation>
          <!--20230621日之前版本开始-->
          <Dzyg v-if="contentmid == 4"></Dzyg>
          <!--20230621日之前版本结束-->
          <!-- <Dzy v-if="contentmid == 4"></Dzy> -->
          <basic-management v-if="contentmid == 5"></basic-management>
          <study-platform v-if="contentmid == 6"></study-platform>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="flowControlVisible"
      width="70%"
      :modal-append-to-body="false"
      center
    >
      <!-- <img
        :src="this.name.name == '行政许可' ? cert : fam"
        style="width: 100%; background-size: auto 100%"
        @click="dialogClickFn"
      /> -->
      <div v-if="flowName === '打假打私'" class="djds-flow">
        <div class="title1">
          <span></span>
          <img src="../assets/djds-new/lcgk/title1.png" alt="" srcset="" />
        </div>
        <div class="radio-list">
          <!-- <el-checkbox-group v-model="flowType">
            <el-checkbox v-for="fam in cases" :label="fam" :key="fam">{{
              fam
            }}</el-checkbox>
          </el-checkbox-group> -->
          <el-radio v-model="flowType" label="1">普通案件</el-radio>
          <el-radio v-model="flowType" label="2">简易案件</el-radio>
        </div>
        <div class="ywbl-box">
          <div class="list1">
            <div class="arrow">
              <img
                v-if="flowType === '1'"
                src="../assets/djds-new/lcgk/djds/lines.png"
                alt=""
              />
              <img
                v-else
                style="width: 300px; height: 70px; margin-top: 68px"
                src="../assets/djds-new/lcgk/djds/db-lines.png"
                alt=""
              />
            </div>
            <div
              class="list1-item"
              v-for="(item, index) in list1"
              :key="index"
              @click="clickFlowSourceBtn(item)"
            >
              <div class="icon">
                <img :src="item.icon" alt="" />
              </div>
              <span>{{ item.title }} &nbsp;&nbsp; <span class="main-color" style="font-size:16px;font-weight:600" >{{
                    item.num
                  }}</span></span>
              <!-- <div class="badge">
                <span>{{ item.num }}</span>
              </div> -->
            </div>
          </div>
          <!-- 前两列 -->
          <div class="list2">
            <div
              class="list2-item"
              v-for="(item, index) in list2"
              :key="index"
              @click="clickCaseFlowFlowBtn(item)"
            >
              <div
                v-if="index < list2.length - 1"
                class="arrow"
                :style="flowType === '2' ? 'left: 250px;' : ''"
              >
                <img src="../assets/djds-new/lcgk/djds/arrow.png" alt="" />
              </div>
              <div class="icon">
                <img :src="item.icon" alt="" />
              </div>
              <div class="title">
                <span>{{ item.title }}&nbsp;&nbsp;</span>
                <span class="main-color">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="title2">
          <img src="../assets/djds-new/lcgk/title2.png" alt="" srcset="" />
        </div>
        <div class="blsx-box">
          <div
            class="blsx-item"
            v-for="(item, index) in list3"
            :key="index"
            @click="clickCaseFlowWarnBtn(item)"
          >
            <div class="icon">
              <img :src="item.icon" alt="" />
            </div>
            <span style="display:inline-block;margin-left:20px">{{ item.title }} &nbsp;&nbsp; <span class="danger-color" style="font-size:16px;font-weight:600" >{{
                    item.num
                  }}</span></span>
            <!-- <div class="badge" style="background-color: red">
              <span>{{ item.num }}</span>
            </div> -->
          </div>
        </div>
      </div>

      <el-dialog
        :visible.sync="detailVisible"
        width="90%"
        :modal-append-to-body="false"
        :modal="false"
      >
        <div class="table-box">
          <el-table
            v-if="name.name === '打假打私'"
            class="customer-table"
            :row-class-name="tableRowClassName"
            :data="djdsData"
          >
            <el-table-column
              property="caseCode"
              label="案件编号"
            ></el-table-column>
            <el-table-column
              property="caseDate"
              label="案发时间"
            ></el-table-column>
            <el-table-column property="party" label="当事人"></el-table-column>
            <el-table-column
              property="caseProperty"
              label="案由"
              min-width="150"
            ></el-table-column>
            <el-table-column
              property="caseTotalVal"
              label="总案值(元)"
            ></el-table-column>
            <el-table-column
              property="caseSource"
              label="案件来源"
            ></el-table-column>
            <el-table-column
              property="reg_time"
              label="立案时间"
            ></el-table-column>
            <el-table-column
              property="handleStatus"
              label="流程阶段"
            ></el-table-column>
            <el-table-column
              min-width="150px"
              property="undertaker"
              label="承办单位"
            ></el-table-column>
            <el-table-column
              v-if="showWarnDesc"
              min-width="260px"
              property="warnDesc"
              label="预警说明"
            ></el-table-column>
          </el-table>
          <el-table
            v-else
            class="customer-table"
            :row-class-name="tableRowClassName"
            :data="xzxkData"
          >
            <el-table-column property="bllx" label="办理类型"></el-table-column>
            <el-table-column property="sqrq" label="申请日期"></el-table-column>
            <el-table-column property="slrq" label="受理日期"></el-table-column>
            <el-table-column
              property="dqblr"
              label="当前办理人"
            ></el-table-column>
            <el-table-column property="syts" label="剩余天数"></el-table-column>
            <el-table-column property="jdrq" label="决定日期"></el-table-column>
            <el-table-column property="ljrq" label="立卷日期"></el-table-column>
            <el-table-column property="qymc" label="企业名称"></el-table-column>
            <el-table-column property="xkzh" label="许可证号"></el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :total="page.total"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            style="text-align: center; margin-top: 10px"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      :visible.sync="flowControlLicVisible"
      width="70%"
      class="rlic"
      :modal-append-to-body="false"
      center
    >
      <div v-if="flowName === '行政许可'" class="xzxk-flow">
        <div class="title1">
          <span></span>
          <img src="../assets/djds-new/lcgk/xzxk/title1.png" alt="" srcset="" />
        </div>
        <div class="radio-list">
          <!-- <el-checkbox-group v-model="xzxkFlowType">
            <el-checkbox
              v-for="licType in licTypes"
              :label="licType"
              :key="licType"
              >{{ licType }}</el-checkbox
            >
          </el-checkbox-group> -->
          <el-radio
            v-for="(item, index) in certTypeList"
            @change="radioChange(item)"
            :key="index"
            v-model="xzxkFlowType"
            :label="index"
            >{{ item.label }}</el-radio
          >
        </div>
        <div class="btn-box">
          <div class="lic-box">
            <div class="item" v-for="(item, index) in xzlc" :key="item.name">
              <div class="item-box" @click="dialogClickFn(item)">
                <img :src="item.img" alt="" class="img" />
                <span style="margin-top: 10px"
                  >{{ item.name }}
                  <span style="color: #42c7de; font-weight: bold">{{
                    item.num
                  }}</span>
                </span>
              </div>
              <div
                src=""
                alt=""
                class="a"
                v-if="index == xzlc.length - 1"
              ></div>
              <img
                src="../assets/djds-new/lcgk/jt.png"
                alt=""
                class="a"
                v-else
              />
            </div>
            <!--  -->
          </div>
          <div class="five-box">
            <div class="title2">
              <img
                src="../assets/djds-new/lcgk/xzxk/title2.png"
                alt=""
                style="display: block"
                srcset=""
              />
            </div>
            <div class="line"></div>
            <div class="blsx-box">
              <div
                class="blsx-item"
                v-for="(item, index) in xkzFlowList3"
                :key="index"
                @click="dialogClickFn(item)"
              >
                <img
                  src="../assets/djds-new/lcgk/jd (3).png"
                  class="img"
                  alt=""
                />
                <span>{{ item.name }} &nbsp;&nbsp; <span class="danger-color" style="font-size:16px;font-weight:600" >{{
                    item.num
                  }}</span></span>
                <!-- <div class="badge">
                  <span>{{ item.num }}</span>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        :visible.sync="detailVisible"
        width="90%"
        :modal-append-to-body="false"
        :modal="false"
      >
        <div class="table-box">
          <el-table
            v-if="name.name === '打假打私'"
            class="customer-table"
            :row-class-name="tableRowClassName"
            :data="djdsData"
          >
            <el-table-column property="lasj" label="立案时间"></el-table-column>
            <el-table-column property="afsj" label="案发时间"></el-table-column>
            <el-table-column property="dsr" label="当事人"></el-table-column>
            <el-table-column
              property="ay"
              label="案由"
              min-width="150"
            ></el-table-column>
            <el-table-column
              property="zaz"
              label="总案值(万元)"
            ></el-table-column>
            <el-table-column property="ajly" label="案件来源"></el-table-column>
            <el-table-column property="clrq" label="处理日期"></el-table-column>
            <el-table-column property="jdrq" label="鉴定日期"></el-table-column>
            <el-table-column property="lcjd" label="流程阶段"></el-table-column>
            <el-table-column property="cbr" label="承办人"></el-table-column>
          </el-table>
          <el-table
            v-else
            class="customer-table"
            :row-class-name="tableRowClassName"
            :data="xzxkData"
            >
            <el-table-column
              property="contact_name"
              label="联系人"
            ></el-table-column>
            <el-table-column
              property="contact_tel"
              label="联系电话"
            ></el-table-column>
            <el-table-column
              property="manager_name"
              label="负责人（经营者）姓名"
            ></el-table-column>
            <el-table-column
              property="company_name"
              label="企业名称/个体工商户字号"
            ></el-table-column>
            <el-table-column
              property="business_addr_street"
              label="经营地址-街道地址"
            ></el-table-column>
            <el-table-column
              property="manager_id_card_no"
              label="负责人身份证件号码"
            ></el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :total="page.total"
            @current-change="changeXz"
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            style="text-align: center; margin-top: 10px"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import regulation from "./regulation/index";
import basicManagement from "./basicManagement/index";
import Qjzl from "./qjzl/qjzl";
import Dzyg from "./dzyg/qjzl";
import Dzy from "./dzy/qjz";

// import Qjzl from './qjzl/qjzl'
// import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
// import centerRight2 from './centerRight2'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'
import certificate from "./certificate/certificate.vue";
import crackDown from "./crackDown/crackDown.vue";
import studyPlatform from "./studyPlatform/index.vue";
import {
  getflowNum,
  getCaseFlowSourceNum,
  getCaseFlowFlowNum,
  getCaseFlowWarnNum,
  getCaseFlowFlowNumNew,
} from "@/api/case.js";
import {
  getLicFlowNum,
  getLicenseProcessStatSqmx,
  getLicenseProcessStatXbmz,
  getLicenseProcessStatQtmz, getLicenseProcessStatXbcq,
} from "@/api/lic.js";
import timePicker from "../components/timePicker/index.vue";
// const cases = ["普通案件", "一般案件"];
export default {
  mixins: [drawMixin],
  data() {
    let cert = require("../assets/cert.png");
    let fam = require("../assets/fam.png");
    let certDetail = require("../assets/cert-detail.png");
    let famDetail = require("../assets/fam-detail.png");
    return {
      // 预警说明字段是否展示
      showWarnDesc:false,
      // 流程管控
      mapUuidTemp:'',
      // 行政许可
      licTypes: ["新办", "延续", "变更", "补办", "停业", "恢复营业", "歇业"],
      xzglType: true,
      res: {},
      xzlc: [],
      xzlc1: [
        {
          name: "申请",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc1.png"),
        },
        {
          name: "受理",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc2.png"),
        },
        {
          name: "审查",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc3.png"),
        },
        {
          name: "审批",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc4.png"),
        },
        {
          name: "决定",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc5.png"),
        },
        {
          name: "立卷",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc1.png"),
        },
      ],
      xzlc2: [
        {
          name: "申请",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc1.png"),
        },
        {
          name: "办理",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc2.png"),
        },
        {
          name: "决定",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc3.png"),
        },
        {
          name: "立卷",
          num: 0,
          img: require("../assets/djds-new/lcgk/lc4.png"),
        },
      ],
      xzxkType: "新办",
      xzxkFlowType: 0,
      xzxkBadge: {
        applyNum: 0, //申请
        accept: 0, // 受理
        approval: 0, //审批
      },
      xkzFlowList1: [
        // {
        //   title: "申请",
        //   num: 0,
        // },
        // {
        //   title: "受理",
        //   num: 0,
        // },
        // {
        //   title: "审查",
        //   num: 0,
        // },

        {
          title: "审批",
          num: 0,
        },
        {
          title: "决定",
          num: 0,
        },
        {
          title: "立卷",
          num: 0,
        },
        // {
        //   title: "可订货",
        //   num: 0,
        // },
        // {
        //   title: "后续监管",
        //   num: 0,
        // },
      ],
      xkzFlowList2: [
        {
          title: "营销绑定",
          num: 0,
        },
        {
          title: "物流绑定",
          num: 0,
        },
        {
          title: "专卖绑定",
          num: 0,
        },
      ],
      xkzFlowList3: [
        {
          name: "办理超期",
          num: 0,
        },
        {
          name: "可订货超期",
          num: 0,
        },
      ],
      // 打假打私
      // cases: cases,
      flowName: "",
      source: null,
      status: null,
      warn: null,
      page: {
        pageSize: 10,
        total: 205,
        name: "",

        currentPage: 1,
      },
      djdsData: [],
      xzxkData: [],
      flowType: "1",
      list1: [
        {
          caseSource: "01",
          title: "投诉举报",
          num: 0,
          // icon: require("../assets/djds-new/lcgk/tousu.png"),
        },
        {
          caseSource: "02",
          title: "市场检查",
          num: 2,
          // icon: require("../assets/djds-new/lcgk/shichang.png"),
        },

       
        {
          caseSource: "03",
          title: "案件移交",
          num: 0,
          // icon: require("../assets/djds-new/lcgk/yijiao.png"),
        },
        {
          caseSource: "04",
          title: "指定管辖",
          num: 0,
          // icon: require("../assets/djds-new/lcgk/guanxia.png"),
        },
        {
          caseSource: "06",
          title: "其他案件",
          num: 0,
          // icon: require("../assets/djds-new/lcgk/qitaanjian.png"),
        },
      ],
      list2: [
        {
          title: "立案调查",
          num: 0,
          handleStatus: "01", // 待
          icon: require("../assets/djds-new/lcgk/djds/lian.png"),
        },
        {
          title: "审批决定",
          num: 0,
          handleStatus: "02",
          icon: require("../assets/djds-new/lcgk/djds/jueding.png"),
        },
        {
          title: "送达执行",
          num: 0,
          handleStatus: "03",
          icon: require("../assets/djds-new/lcgk/djds/songda.png"),
        },
        {
          title: "立卷",
          num: 0,
          handleStatus: "04",
          icon: require("../assets/djds-new/lcgk/djds/lijuan.png"),
        },
      ],
      list2Second: [
        {
          title: "结案", // 待
          num: 5,
          handleStatus: "04",
        },
        {
          title: "立卷",
          num: 3,
        },
      ],
      list2Third: [
        // 待
        {
          title: "送达",
          num: 2,
          handleStatus: "03",
        },
        {
          title: "物品处理",
          num: 0,
        },
        {
          title: "执行",
          num: 0,
        },
        {
          title: "缴款",
          num: 2,
        },
        {
          title: "结案",
          num: 5,
        },
        {
          title: "立卷",
          num: 3,
          handleStatus: "04",
        },
      ],
      list3: [
        {
          docCode: "docRegisterReport",
          // title: "立案时限预警",
          title: "立案时限超期",
          num: 0,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
        {
          docCode: "docGoodsReg",
          // title: "审核时限预警",
          title: "物品处理时限超期",
          num: 2,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
        {
          docCode: "docPunishDecideCreate",
          // title: "送达时限预警",
          title: "处罚时限超期",
          num: 0,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
        {
          docCode: "docReceiptOrConfirm",
          // title: "物品处理时限预警",
          title: "送达时限超期",
          num: 0,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
      ],
      // 时间选择
      timeList: [
        {
          value: "year",
          name: "年",
        },
        {
          value: "month",
          name: "月",
        },
        {
          value: "day",
          name: "日",
        },
      ],
      activeTime: 0,
      //old
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      certTypeList: [
        {
          value: 0,
          label: "新办",
        },
        {
          value: 1,
          label: "延续",
        },
        {
          value: 2,
          label: "变更",
        },
        {
          value: 3,
          label: "补办",
        },
        {
          value: 4,
          label: "停业",
        },
        {
          value: 5,
          label: "恢复营业",
        },
        {
          value: 6,
          label: "歇业",
        },
      ],
      decorationColor: ["#568aea", "#000000"],
      contentmid: 0,
      doctitle: "专卖监管分析决策大屏",
      liflag: 0,
      bannerlist: [
        {
          name: "全景总览",
        },
        {
          name: "行政许可",
        },
        {
          name: "打假打私",
        },
        {
          name: "市场监管",
        },
        {
          name: "电子烟管理",
        },
        {
          name: "队伍建设",
        },
        {
          name: "研判平台",
        },
      ],
      flowControlVisible: false,
      flowControlLicVisible: false,
      cert: cert,
      fam: fam,
      name: { name: "全景总览" },
      detailVisible: false,
      certDetail: certDetail,
      famDetail: famDetail,
    };
  },
  watch: {
    flowType(newVal, oldVal) {
      this.getCasebadge();
      if (newVal === "1") {
        // 普通
        this.list1 = [
          {
            caseSource: "01",
            title: "投诉举报",
            num: 0,
            // icon: require("../assets/djds-new/lcgk/tousu.png"),
          },
          {
            caseSource: "02",
            title: "市场检查",
            num: 2,
            // icon: require("../assets/djds-new/lcgk/shichang.png"),
          },

          {
            caseSource: "04",
            title: "案件移交",
            num: 0,
            // icon: require("../assets/djds-new/lcgk/yijiao.png"),
          },
          
          {
            caseSource: "03",
            title: "指定管辖",
            num: 0,
            // icon: require("../assets/djds-new/lcgk/guanxia.png"),
          },
          {
            caseSource: "05",
            title: "其他案件",
            num: 0,
            // icon: require("../assets/djds-new/lcgk/qitaanjian.png"),
          },
        ];
        this.list2 = [
          {
            title: "立案调查",
            num: 0,
            handleStatus: "01", // 待
            icon: require("../assets/djds-new/lcgk/djds/lian.png"),
          },
          {
            title: "审批决定",
            num: 0,
            handleStatus: "02",
            icon: require("../assets/djds-new/lcgk/djds/jueding.png"),
          },
          {
            title: "送达执行",
            num: 0,
            handleStatus: "03",
            icon: require("../assets/djds-new/lcgk/djds/songda.png"),
          },
          {
            title: "立卷",
            num: 0,
            handleStatus: "04",
            icon: require("../assets/djds-new/lcgk/djds/lijuan.png"),
          },
        ];
        this.list3 = [
        {
          docCode: "docRegisterReport",
          // title: "立案时限预警",
          title: "立案时限超期",
          num: 0,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
        {
          docCode: "docGoodsReg",
          // title: "审核时限预警",
          title: "物品处理时限超期",
          num: 2,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
        {
          docCode: "docPunishDecideCreate",
          // title: "送达时限预警",
          title: "处罚时限超期",
          num: 0,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
        {
          docCode: "docReceiptOrConfirm",
          // title: "物品处理时限预警",
          title: "送达时限超期",
          num: 0,
          icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
        },
      ]
      } else {
        //简易
        this.list1 = [
          {
            caseSource: "01",
            title: "投诉举报",
            num: 0,
            // icon: require("../assets/djds-new/lcgk/tousu.png"),
          },
          {
            caseSource: "02",
            title: "市场检查",
            num: 2,
            // icon: require("../assets/djds-new/lcgk/shichang.png"),
          },
        ];
        this.list2 = [
          {
            title: "当场处罚",
            num: 0,
            handleStatus: "05", // 待
            icon: require("../assets/djds-new/lcgk/djds/chufa.png"),
          },
          {
            title: "立卷",
            num: 0,
            handleStatus: "04",
            icon: require("../assets/djds-new/lcgk/djds/lijuan.png"),
          },
        ];
        this.list3 = [
          {
            docCode: "situationRecordOverdue",
            // title: "立案时限预警",
            title: "备案时限超期",
            num: 0,
            icon: require("../assets/djds-new/lcgk/djds/yujing.png"),
          },
        ];
      }
    },
    async name(newVal, oldVal) {
      if (newVal.name === "行政许可") {
        setTimeout(async ()=>{
          console.log("行政许可======");

            this.res = await getLicFlowNum({ page: 0 ,...JSON.parse(sessionStorage.getItem('certificateTimObj')),columnName:localStorage.getItem('columnName')
              ,orgUuid:localStorage.getItem('mapUuid')});
            
            console.log(this.res, "行政许可流程管控======");
            
            this.xzlc1.forEach((item) => {
              let num = this.res.licenseProcessData.data.find(
                (k) => k.apply_type_name == "新办" && k.stage_name == item.name
              );
              if (!num) {
                item.num = 0;
              }else{
                item.num = num.num
              } 
              // else {
              //   item.num = num.num > 99 ? "99+" : num.num;
              // }
            });
            getLicenseProcessStatSqmx({
              applyType:'01',
              stageCode: "approval",
              limit: 10,
              page:1,
              ...JSON.parse(sessionStorage.getItem('certificateTimObj'))
              ,columnName:localStorage.getItem('columnName')
              ,orgUuid:localStorage.getItem('mapUuid')
            }).then((newRes)=>{
              this.xzlc1.forEach(k=>{if(k.name==='申请'){
                k.num = newRes.apply_list_total.data[0].num
              }})
            })
            this.xzlc = this.xzlc1;
            
            // this.xzxkBadge.applyNum =
            //   res.applyNum.data[0].num > 99 ? "99+" : res.applyNum.data[0].num;
            // this.xzxkBadge.accept =
            //   res.licenseProcessData.data.find((k) => k.stage_name === "受理")[
            //     "count(handle_main_uuid)"
            //   ] > 99
            //     ? "99+"
            //     : res.licenseProcessData.data.find((k) => k.stage_name === "受理")[
            //         "count(handle_main_uuid)"
            //       ];
            // this.xzxkBadge.approval =
            //   res.licenseProcessData.data.find((k) => k.stage_name === "审批")[
            //     "count(handle_main_uuid)"
            //   ] > 99
            //     ? "99+"
            //     : res.licenseProcessData.data.find((k) => k.stage_name === "审批")[
            //         "count(handle_main_uuid)"
            //       ];
            this.xkzFlowList3.forEach((k) => {
              let item = this.res.applyYj5Num.data.find(
                (k2) => k.name === k2.name
              );
              k.num = item ? item.num : 0;
            });
        },100)
      
      } else if (newVal.name === "打假打私") {
        setTimeout(()=>{
          console.log("打假打私======");
         this.getCasebadge();
        },100)
      }
    },
    deep: true,
  },
  components: {
    Qjzl, //全景总览
    regulation,
    basicManagement,
    timePicker,
    certificate,
    crackDown,
    Dzyg, //电子烟管
    Dzy, //电子烟管理621日后
    studyPlatform, // 研判平台
  },
  created(){
    this.mapUuidTemp = localStorage.getItem('mapUuid')
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    radioChange(val) {
      console.log('切换',val);
      this.xzxkType=val.label
      let applyType=''
      if (this.xzxkType == "新办") {
        applyType = "01";
      } else if (this.xzxkType == "延续") {
        applyType = "03";
      } else if (this.xzxkType == "变更") {
        applyType = "02";
      } else if (this.xzxkType == "补办") {
        applyType = "06";
      } else if (this.xzxkType == "停业") {
        applyType = "04";
      } else if (this.xzxkType == "恢复营业") {
        applyType = "05";
      } else if (this.xzxkType == "歇业") {
        applyType = "07";
      }
      getLicenseProcessStatSqmx({
         applyType,
         stageCode: "approval",
         limit: 10,
         page:1,
         ...JSON.parse(sessionStorage.getItem('certificateTimObj'))
       }).then((newRes)=>{
         this.xzlc1.forEach(k=>{if(k.name==='申请'){
           k.num = newRes.apply_list_total.data[0].num
         }})
         this.xzlc2.forEach(k=>{if(k.name==='申请'){
           k.num = newRes.apply_list_total.data[0].num
         }})
       })
      this.xzxkType = val.label;
      if (val.value <= 2) {
        this.xzlc1.forEach((item) => {
          let num = this.res.licenseProcessData.data.find(
            (k) => k.apply_type_name == val.label && k.stage_name == item.name
          );
          if (!num) {
            item.num = 0;
          }else{
            item.num = num.num 
          } 
          // else {
          //   item.num = num.num > 99 ? "99+" : num.num;
          // }
        });
        this.xzlc = this.xzlc1;
      } else {
        this.xzlc2.forEach((item) => {
          let num = this.res.licenseProcessData.data.find(
            (k) => k.apply_type_name == val.label && k.stage_name == item.name
          );
          if (!num) {
            item.num = 0;
          }else{
            item.num = num.num
          } 
          // else {
          //   item.num = num.num > 99 ? "99+" : num.num;
          // }
        });
        this.xzlc = this.xzlc2;
      }
    },
    tableRowClassName({ row }) {
      return "table-row";
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 600);
    },
    bannertab(item, name) {
      this.liflag = item;
      this.contentmid = item;
      this.name = name;
    },
    flowControlFn(name) {
      this.flowName = name;
      if (name == "行政许可") {
        this.getLicBadge()
        this.flowControlLicVisible = true;
      } else {

       this.flowControlVisible = true;
       this.getCasebadge();

      }
    },
    //行政许可详情换页
    changeXz(val) {
      this.dialogClickFn({ name: this.page.name, currentPage: val });
    },
    //行政许可流程详细事件
    dialogClickFn(val) {
      debugger;
      var applyType;
      let req1 = {};
      let page = 1;
      if (typeof val.currentPage != "undefined") {
        page = val.currentPage;
      }
      let stageCode = "";
      if (this.xzxkType == "新办") {
        applyType = "01";
      } else if (this.xzxkType == "延续") {
        applyType = "03";
      } else if (this.xzxkType == "变更") {
        applyType = "02";
      } else if (this.xzxkType == "补办") {
        applyType = "06";
      } else if (this.xzxkType == "停业") {
        applyType = "04";
      } else if (this.xzxkType == "恢复营业") {
        applyType = "05";
      } else if (this.xzxkType == "歇业") {
        applyType = "07";
      }
      if (val.name == "受理" || val.name == "办理") {
        stageCode = "accept";
      } else if (val.name == "审查") stageCode = "audit";
      else if (val.name == "审批") stageCode = "approval";
      else if (val.name == "决定") stageCode = "decide";
      else if (val.name == "立卷") stageCode = "filing";
      console.log(val, "点击详情");
      if (val.name == "申请") {
        req1 = getLicenseProcessStatSqmx({
          applyType,
          stageCode: "approval",
          limit: 10,
          page,
          ...JSON.parse(sessionStorage.getItem('certificateTimObj'))
          ,columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')
        });
      }else if (val.name == "办理超期" || val.name == "可订货超期") {
        applyType = "01";
        var bizCode ="zm";
        if (val.name == "可订货超期"){
          bizCode="yx"
        }
        req1 = getLicenseProcessStatXbcq({
          applyType,
          limit: 10,
          page,
          ...JSON.parse(sessionStorage.getItem('certificateTimObj')),
          bizCode
          ,columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')
        });
      } else {
        req1 = getLicenseProcessStatQtmz({
          applyType,
          stageCode,
          limit: 10,
          page,
          ...JSON.parse(sessionStorage.getItem('certificateTimObj'))
          ,columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')
        });
      }

      let that = this;

      Promise.all([req1]).then(function (results) {
        let data = results[0];
        console.log(data, "点击详情");
        if (val.name == "申请") {
          that.xzxkData = data.apply_list?.data;
        that.page.total = data.apply_list_total?.data[0].num;
        }else{
          that.xzxkData = data.apply_xb_list?.data;
        that.page.total = data.apply_xb_list_total?.data[0].num;
        }


        that.page.name = val.name;
        that.detailVisible = true;
      });
    },
    async getCasebadge() {
      try {
        const res = await getflowNum({ handleProc: "0" + this.flowType ,...JSON.parse(sessionStorage.getItem('djdsTimObj')),columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')});
        console.log(res.caseSourceNum.data, "11111=======");
        this.list1.forEach((k) => {
          let item = res.caseSourceNum.data.find(
            (k2) => k.caseSource === k2.caseSource
          );
          k.num = item ? item.num  : 0;
        });
        this.list2.forEach((k) => {
          let item = res.flowCaseNum.data.find(
            (k2) => k.handleStatus === k2.handleStatus
          );
          k.num = item ? item.num  : 0;
        });
        // this.list2Third.forEach((k) => {
        //   let item = res.flowCaseNum.data.find(
        //     (k2) => k.handleStatus === k2.handleStatus
        //   );
        //   k.num = item ? (item.num > 99 ? "99+" : item.num) : 0;
        // });
        this.list3.forEach((k) => {
          let item = res.warnCaseNum.data.find(
            (k2) => k.docCode === k2.docCode
          );
          k.num = item ? item.num  : 0;
        });
      } catch (error) {
        console.log(error, "error----");
      }
    },
    // 打假打私来源
    clickFlowSourceBtn(item) {
      if (!item.num) return;
      this.detailVisible = true;
      this.status = null;
      this.warn = null;
      this.source = item.caseSource;
      this.getCaseFlowSourceNumFn("0" + this.flowType, item.caseSource, 1);
    },
    async getCaseFlowSourceNumFn(handleProc, caseSource, page) {
      try {
        const res = await getCaseFlowSourceNum({
          handleProc, //01 普通 02 简易
          caseSource,
          page,
          ...JSON.parse(sessionStorage.getItem('djdsTimObj'))
          ,columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')
        });
        this.djdsData = res.list.data;
        this.page.total = res.totalNum.data[0].num;
      } catch (error) {
        console.log(error, "error");
      }
    },
    // 打假打私流程
    clickCaseFlowFlowBtn(item) {
      if (!item.num) return;
      this.source = null;
      this.warn = null;
      this.detailVisible = true;
      this.status = item.handleStatus;
      this.clickCaseFlowFlowNumFn("0" + this.flowType, item.handleStatus, 1);
    },
    async clickCaseFlowFlowNumFn(handleProc, handleStatus, page) {
      try {
        this.showWarnDesc=false
        const res = await getCaseFlowFlowNum({
          handleProc, //01 普通 02 简易
          handleStatus,
          page,
          ...JSON.parse(sessionStorage.getItem('djdsTimObj'))
          ,columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')
        });
        this.djdsData = res.list.data;
        this.page.total = res.totalNum.data[0].num;
      } catch (error) {
        console.log(error, "error");
      }
    },
    // 打假打私预警
    clickCaseFlowWarnBtn(item) {
      if (!item.num) return;
      this.source = null;
      this.status = null;
      this.detailVisible = true;
      this.warn = item.docCode;
      this.clickCaseFlowWarnNumFn("0" + this.flowType, item.docCode, 1);
    },
    async clickCaseFlowWarnNumFn(handleProc, warnType, page) {
      try {
        this.showWarnDesc=true
        // const res = await getCaseFlowFlowNum({
        const res = await getCaseFlowFlowNumNew({
          handleProc, //01 普通 02 简易
          warnType,
          page,
          ...JSON.parse(sessionStorage.getItem('djdsTimObj'))
          ,columnName:localStorage.getItem('columnName')
          ,orgUuid:localStorage.getItem('mapUuid')
        });
        this.djdsData = res.list.data;
        this.page.total = res.totalNum.data[0].num;
      } catch (error) {
        console.log(error, "error");
      }
    },
    async getLicBadge(){
      var params = { page: 0 ,...JSON.parse(sessionStorage.getItem('certificateTimObj')),columnName:localStorage.getItem('columnName'),orgUuid:localStorage.getItem('mapUuid')};
      this.res = await getLicFlowNum(params);
 
      console.log(this.res, "行政许可流程管控======");

      this.xzlc1.forEach((item) => {
        let num = this.res.licenseProcessData.data.find(
          (k) => k.apply_type_name == "新办" && k.stage_name == item.name
        );
        if (!num) {
          item.num = 0;
        } else{
          item.num=num.num
        }
        // else {
        //   item.num = num.num > 99 ? "99+" : num.num;
        // }
      });
      console.log(this.xzlc1);
       getLicenseProcessStatSqmx({
         applyType:'01',
         stageCode: "approval",
         limit: 10,
         page:1,
         ...JSON.parse(sessionStorage.getItem('certificateTimObj'))
         ,columnName:localStorage.getItem('columnName')
         ,orgUuid:localStorage.getItem('mapUuid')
       }).then((newRes)=>{
         this.xzlc1.forEach(k=>{if(k.name==='申请'){
           k.num = newRes.apply_list_total.data[0].num
         }})
       })
       this.xzlc = this.xzlc1;
       this.xkzFlowList3.forEach((k) => {
        let item = this.res.applyYj5Num.data.find(
          (k2) => k.name === k2.name
        );
        k.num = item ? item.num  : 0;
      });
    },
    handleCurrentChange(val) {
      if (this.source) {
        this.getCaseFlowSourceNumFn("0" + this.flowType, this.source, val);
      }
      if (this.status) {
        this.clickCaseFlowFlowNumFn("0" + this.flowType, this.status, val);
      }
      if (this.warn) {
        this.clickCaseFlowWarnNumFn("0" + this.flowType, this.warn, val);
      }
    },
    // 改变时间
    changeTime(i) {
      this.activeTime = i;
    },
    getCheckedBj(index){
      if(this.liflag==index){
        if(index==0||index==1||index==2){
          return 'activeli-left'
        }else if(index==3){
          return 'activeli-center'
        }else{
          return 'activeli-rigth'
        }
      }else{
        return ''
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";
:deep(.el-radio__inner) {
  border-radius: 2px;
}

:deep(.el-radio__input.is-checked) .el-radio__inner::after {
  width: 10px;
  height: 5px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 2px;
  left: 0px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
.table-box {
  width: 99%;
}
.list2 {
  position: relative;
}
::v-deep .el-dialog__wrapper {
  z-index: 9999999999 !important ;
  .el-dialog.el-dialog--center {
    position: absolute;
    left: 18%;
    top: 5%;
    width: 60%;
    height: 80%;
  }
}
::v-deep .rlic.el-dialog__wrapper {
  z-index: 9999999999 !important ;
  .el-dialog.el-dialog--center {
    position: absolute;
    left: 18%;
    top: 10%;
    width: 60%;
    height: 70%;
  }
}
::v-deep .el-dialog {
  background: url(../assets/djds-new/lcgk/bg2.png) !important;
  background-size: 100% 100% !important;
}
::v-deep .el-dialog__headerbtn {
  font-size: 35px !important;
  background: rgb(5, 95, 148, 0.8);
  border: 1px solid rgb(5, 95, 148, 0.8);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
::v-deep .el-dialog__close {
  line-height: 0;
}
::v-deep .el-pagination {
  color: #fff;
}
::v-deep .el-pagination {
  .el-pager {
    li.number.active {
      background: rgb(11, 104, 154) !important;
    }
  }
  .btn-next,
  .btn-prev,
  .number,
  .el-icon-more {
    background: linear-gradient(
      rgba(5, 94, 147, 0.8),
      rgba(8, 48, 101, 0.8)
    ) !important;
    color: #fff;
  }
}
::v-deep .el-table {
  tr,
  .el-table__cell {
    background: linear-gradient(
      rgba(5, 94, 147, 0.8),
      rgba(8, 48, 101, 0.8)
    ) !important;
    color: #fff;
  }
  .el-table__cell {
    border-bottom: 0 !important  ;
  }
}
// 去掉表格单元格边框
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
// 表格最外边框
::v-deep .el-table--border,
.el-table--group {
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf {
  border: 1px solid #ebeef5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid #ebeef5;
}
// 表格最外层边框-底部边框
::v-deep .el-table--border::after,
.el-table--group::after {
  width: 0;
}
.customer-table::before {
  width: 0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
// 表格有滚动时表格头边框
::v-deep .el-table--border th.gutter:last-of-type {
  border: 1px solid #ebeef5;
  border-left: none;
}
.time-btn {
  display: flex;
  font-size: 16px;
  padding-top: 35px;
  padding-right: 430px;
  display: flex;
  justify-content: end;
  .time-btn-item {
    cursor: pointer;
    background: url(../assets/head-new/time.png) !important;
    background-size: 100% 100% !important;
    margin-left: -15px;
    width: 74px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
  .active {
    cursor: pointer;
    background: url(../assets/head-new/time-active.png) !important;
    background-size: 100% 100% !important;
  }
}
</style>
